<template>
	<view class="map-container">
		<map id="homeMap" ref="map" class="map-view" :longitude="longitude" :latitude="latitude" :show-location="true" :show-compass="true" :markers="markers"></map>
		<!-- <view class="map-control">
			<view class="map-move-current" @click="handleMoveToCurrent">
				<uni-icons type="map-pin-ellipse" size="32" color="#c0c0c0"></uni-icons>
			</view>
		</view> -->
		<view class="menu-bar">
			<view class="menu-item">
				<view class="menu-wrap" @click="handleEnterOrder">
					<uni-icons type="list" size="28" color="#fff"></uni-icons>
				</view>
			</view>
			<view class="menu-item">
				<view class="menu-wrap" @click="handlePlus">
					<uni-icons type="plusempty" size="28" color="#fff"></uni-icons>
				</view>
			</view>
			<view class="menu-item">
				<view class="menu-wrap" @click="handleEnterUser">
					<uni-icons type="person-filled" size="28" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let __this = null
	import unIcons from '@/components/uni-icons/uni-icons.vue'
	import { mapGetters } from 'vuex'
	export default {
		components: {
			unIcons
		},
		data() {
			return {
				latitude: undefined,
				longitude: undefined,
				homeMap: null,
				markers: []
			}
		},
		computed: {
			...mapGetters(['role'])
		},
		onReady() {
			if(this.role === 'STUFF') {
				// 如果当前用户是回收员，则查询附近订单
			}
		},
		onLoad() {
			this.getCurrentLocation()
			// this.handleMoveToCurrent()
			
			// 创建地图实例
			__this = this
			__this.homeMap = uni.createMapContext("homeMap", __this)
		},
		methods: {
			// 将地图中心点平移到当前位置
			moveToLocation(res) {
				__this.latitude = res.latitude
				__this.longitude = res.longitude
				__this.homeMap.moveToLocation({
					longitude: res.longitude,
					latitude: res.latitude
				})
			},
			// 获取用户定位信息并设置为当前地图中心点
			getCurrentLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						__this.moveToLocation(res)
					},
					fail: (err) => {
						uni.showToast({
							title: '获取位置信息失败',
							icon: 'error'
						})
					}
				})
			},
			// 进入订单
			handleEnterOrder() {
				uni.navigateTo({
					url: '/pages/order/order'
				})
			},
			// 根据用户身份判断用户的点击结果
			handlePlus() {
				const sessionId = uni.getStorageSync('SESSION_ID')
				if(!sessionId) {
					uni.showToast({
						title: '请登录后操作',
						icon: 'none'
					})
					uni.navigateTo({
						url: '/pages/user/user'
					})
					return
				}
				if(this.role === 'USER') {
						this.handleUserPlus()
				} else if (this.role === 'STUFF') {
					this.handleSearchOrder()
				}
			},
			// 用户角色点击+号
			handleUserPlus() {
				uni.navigateTo({
					url: '/pages/publish/publish'
				})
			},
			// 回收员点击抢单
			handleSearchOrder() {
				uni.navigateTo({
					url: '/pages/robOrder/robOrder'
				})
			},
			// 进入个人中心
			handleEnterUser() {
				uni.hideLoading()
				uni.navigateTo({
					url:'/pages/user/user'
				})
			},
			// 搜索附近订单
			getOrderList() {
				const self = this
				this.$request.order.queryRobOrderList()
					.then(res => {
						if(res.status === 200) {
							const result = res.data.map(item => {
								const obj = {
									id: item.id,
									latitude: item.latitude,
									longitude: item.longitude,
									iconPath: require('@/static/images/marker.png'),
									width: 20,
									height: 20
								}
								return obj
							})
							self.markers = result
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
					.catch(() => {
						uni.showToast({
							title: '查询附近订单数据失败',
							icon: 'none'
						})
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
.map-container {
	height: 100vh;
	.map-view {
		width: 100vw;
		height: 100vh;
	}
	.menu-bar {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 40rpx;
		display: flex;
		.menu-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			.menu-wrap {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background: $primary;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: $shadow;
			}
		}
	}
	.map-control {
		position: fixed;
		right: 20rpx;
		bottom: 200rpx;
		.map-move-current {
			width: 90rpx;
			height: 90rpx;
			background: $white;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: $uni-border-radius-circle;
		}
	}
}
</style>
